<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <template slot="before"
          >本月 社保在缴 公积金在缴 增员 减员 入职 离职</template
        >
        <template slot="after">
          <el-button type="error" size="mini" @click="$router.push('/import')"
            >历史归档</el-button
          >
          <el-button type="primary" size="mini" @click="showDialog = true"
            >2020年01报表</el-button
          >
        </template>
      </page-tools>
      <el-card v-loading="loading">
        <el-table
          :data="tableData"
          style="width: 100%"
          :default-sort="{ prop: 'timeOfEntry', order: 'descending' }"
        >
          <el-table-column
            prop="date"
            label="序号"
            sortable
            width="80"
            align="center"
            type="index"
          />
          <el-table-column
            prop="username"
            label="姓名"
            sortable
            width="150"
            align="center"
          />
          <el-table-column
            prop="mobile"
            label="手机"
            sortable
            align="center"
            width="180"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
            sortable
            align="center"
          />
          <el-table-column
            prop="departmentName"
            label="部门名称"
            sortable
            align="center"
          />
          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
            sortable
            width="220"
            align="center"
          />
          <el-table-column
            prop="leaveTime"
            label="离职时间"
            sortable
            width="220"
            align="center"
          />

          <el-table-column
            prop="participatingInTheCity"
            label="社保城市"
            sortable
            align="center"
          />

          <el-table-column
            prop="providentFundCity"
            label="公积金城市"
            sortable
            align="center"
          />
          <el-table-column
            prop="socialSecurityBase"
            label="社保基数"
            sortable
            align="center"
          />
          <el-table-column
            prop="providentFundBase"
            label="公积金基数"
            sortable
            align="center"
          />

          <el-table-column
            prop="date"
            label="操作"
            sortable
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="$router.push(`social/detail/${scope.row.id}`)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px; display: flex; justify-content: end">
          <el-pagination
            :current-page="params.page"
            :page-sizes="[10, 50]"
            :page-size="params.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {getSocialSecuritysList}from '@/api/social'
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      params: {
        page: 1, //	页码
        pageSize: 10,
      },
      total: 10,
    };
  },
  created(){
    this.getSocialSecuritysList()
  },
  methods:{
    async getSocialSecuritysList(){
     const {total,rows}= await getSocialSecuritysList(this.params)
     this.total=total
     this.tableData=rows
     console.log(total,rows)
    },
    handleSizeChange(newpagesize){
      this.params.pageSize=newpagesize
      this.getSocialSecuritysList()
    },
    handleCurrentChange(newpage){
      this.params.page=newpage
      this.getSocialSecuritysList()
    }

  }
};
</script>

<style>
</style>
